<template>
  <div class="popover_view">
    <div class="popover_content_view">
      <img :src="member.avatar" alt="" class="popover_avatar">
      <div class="popover_info">
        <div class="popover_name">{{ member.displayName }}</div>
        <div class="popover_id">ID:{{ member.user_id }}</div>
      </div>
    </div>

    <div class="popover_btn">
      <div class="popover_btn_item" @click="add_friend">{{ $t('msg.添加到通讯录') }}</div>
      <!-- <div class="popover_btn_item" @click="openChat(member.user_id)">{{ $t('msg.发起临时会话') }}</div> -->
    </div>
    <AddFriend :visible.sync="addFriendBox" :member="member" />
  </div>
</template>

<script>
import { mapState } from 'vuex';
import AddFriend from "@/components/message/user/AddFriend.vue";
export default {
  name: 'NotFriend',
  components: {
    AddFriend
  },
  props: {
    member: {
      type: Object,
      default: () => { }
    }
  },
  computed: {
    ...mapState({
      userInfo: state => state.userInfo,
      globalConfig: state => state.globalConfig,
    }),
    isFriend() {
      return this.userInfo.user_id != this.member.user_id && (this.member.friend || this.globalConfig.sysInfo.runMode == 1);
    }
  },

  data() {
    return {
      addFriendBox: false,
      detail: {},
    };
  },

  methods: {
    closeDialog() {
      this.$emit('close')
    },
    openChat() {
      let temp = this.member;
      let contact = {
        ...temp,
        id: temp.user_id
      }
      this.$emit('ok', contact);
    },

    // 添加好友
    add_friend() {
      this.addFriendBox = true;
    }
  }
}
</script>

<style lang="scss">
.popover_view {
  width: 260px;
  padding: 12px;
  box-sizing: border-box;

  &_view {
    border-bottom: 1px solid #EDEDED;
    padding-bottom: 16px;
    display: flex;

    .popover_avatar {
      width: 52px;
      height: 52px;
      border-radius: 4px 4px 4px 4px;
    }

    .popover_info {
      padding: 5px 12px;
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }

    .popover_name {
      font-size: 18px;
      color: #333333;
    }

    .popover_id {
      font-size: 12px;
      color: #7F7F7F;
    }
  }



  .popover_btn {
    padding-top: 32px;
    display: flex;
    justify-content: center;

    &_item {
      width: 118px;
      height: 32px;
      line-height: 32px;
      text-align: center;
      font-size: 14px;
      color: #FFFFFF;
      background: #2273FF;
      border-radius: 8px 8px 8px 8px;
      border: 1px solid #2273FF;
      cursor: pointer;

      // &:last-child {
      //   color: #2273FF;
      //   background: #FFFFFF;
      // }
    }
  }
}
</style>